<template>
  <!--1 待考试 2已考试-->
  <!--state  1未开始  2进行中  3已结束-->
  <div class="MyNotes" ref="container">
    <mu-tabs
      style="margin-top:35px;"
      :value.sync="tab"
      @change="tabChange"
      color="#fff"
      indicator-color="#F47548"
      centered
      fixed-tabs
    >
      <mu-tab ripple>待考试</mu-tab>
      <mu-tab ripple>已考试</mu-tab>
    </mu-tabs>
    <Loading v-if="notMore" class="empty-text-wrap"/>
    <mu-load-more @load="load" :loading="loading">
      <div>
        <ul>
          <li v-for="item of listData" :key="item.id" @click="answerGuide(item)">
            <div class="title">
              <span>{{item.title}}</span>
              <div>
                <span v-if="e==1">{{item.start_time | time}}- {{item.close_time | time}}</span>
                <span v-if="e==2">得分：{{item.fraction}}分 <span @click.stop="rank(item)">考试排行</span></span>
                <span>{{item.examinee_sum}}人参加</span>
              </div>
            </div>
            <div
              v-if="e==1"
              class="img"
              :class="item.state == 1?'':item.state==2?'img2':item.state==3?'img3':''"
            >
              <span>{{item.state | state}}</span>
            </div>
            <div v-if="e==2" class="img img4">
              <span v-if="e==2">答题解析</span>
            </div>
          </li>
        </ul>
      </div>
    </mu-load-more>
    <div class="loading" v-if="loadOver" :class="{'notPageOne':p>1||listData.length<6}">{{loaded}}</div>
  </div>
</template>

<script>
 import Loading from '@/components/emptyText.vue';
export default {
    components: {
        Loading
    },
  data() {
    return {
      e: 1,
      listData: [],
      tab: 0,
      refreshing: false,
      loading: false,
      MyNoteList: [],
      name: "",
      photo: "",
      p: 1,
      loaded: "加载更多...",
        loadOver:false,
        notMore:false,
    };
  },
  created() {
    this.organization_id = JSON.parse(
      Cookies.get('user_71ydj')
    ).organization_id;
    this.phone = JSON.parse(Cookies.get('user_71ydj')).phone;
    this.$progress.done();
  },
  mounted() {
    this.init(1);
  },

  methods: {
    rank(item){
          this.$router.push({path:'/learn/examRank',query:{id:item.id}})
    },
    answerGuide(item) {
      if (this.e == 2) {
        this.$router.push({
          path: "/learn/answerAnalysis",
          query: {
            id: item.id
          }
        });
      }
      //state  1未开始  2已结束  3进行中
      if (this.e == 1) {
          if(item.state==1){
            this.$toast.error('当前考试尚未开始');
            return false;
          }else{
              if(item.state==2){
                  this.$alert('当前考试已结束，你仍可参加考试，本次考试结果不纳入排行').then((res)=>{
                      this.$router.replace({
                          path: "/learn/answerGuide",
                          query: {
                              id: item.id,
                              isOver:false,
                              state:true,
                          }
                      });
                  });
              }else{
                  this.$router.push({
                      path: "/learn/answerGuide",
                      query: {
                          id: item.id,
                          isOver:true
                      }
                  });
              }

          }

      }
    },
    tabChange(e) {
        if(e==0){
            this.e=1
        }else{
            this.e=2;
        }
      this.listData = [];
      this.p=1;
      this.loadOver =false;
      this.notMore =false;
      this.loading =false;
      this.init();
    },
    init(state) {
      this.$http
        .get("/applets/Test/test_list", {
          org_id: this.organization_id,
          phone: this.phone,
          p: this.p,
          page: 6,
          status: this.e
        })
        .then(res => {
            if (res.data.data.length) {
                this.listData.push(...res.data.data);
            }
            this.loadOver = false;
            if (this.p != 1) {
                console.log(res.data);
                if (res.data.data.length) {
                    console.log(res.data)
                } else {
                    this.loadOver = true;
                    this.loading = false;
                    this.loaded = '没有更多数据了'
                    return false
                }
            } else {
                if (!res.data.data.length) {
                    this.notMore = true;
                    this.loadOver = false;
                } else {
                    if (res.data.data.length < 6 && res.data.data.length != 0) {
                        this.loadOver = true;
                        this.loaded = '没有更多数据了';
                        this.notMore =false;
                    }
                }
            }
          //
          // if (res.data.data.length == 0) {
          //   this.loaded = "没有更多了";
          //   return;
          // }
          // this.listData.push(...res.data.data);
          // if (res.data.data.length < 10) {
          //   this.loaded = "没有更多了";
          //   return;
          // }
        });
    },
    refresh() {
      this.refreshing = true;
      this.$refs.container.scrollTop = 0;
      this.p = 1;
      this.init();
    },
    load() {
        if (!this.loadOver) {
            this.loading = true;
            clearTimeout(this.method);
            this.method = setTimeout(() => {
                this.p = this.p + 1;
                this.init();
                this.loading = false;
            }, 1000);
        }

      // this.loading = true;
      // this.p++;
      // this.init(this.tab + 1);
    }
  },
  filters: {
    state: e => {
      if (e == 1) {
        return "未开考";
      }
      if (e == 2) {
        return "已结束";
      }
      if (e == 3) {
        return "考试中";
      }
    }
  }
};
</script>
<style>
.MyNotes .mu-tabs {
  position: relative;
  z-index: 97;
  height: 40px;
  margin-bottom: 15px;
  background-color: transparent !important;
}
.MyNotes .mu-tab-link-highlight {
  width: 24px !important;
  height: 3px;
  background: linear-gradient(
    235deg,
    rgba(235, 77, 68, 1),
    rgba(244, 117, 72, 1)
  );
  border-radius: 1px;
  margin-left: 18px;
}
.MyNotes .mu-tab {
  font-size: 14px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  color: rgba(51, 51, 51, 0.5);
  min-width: 60px;
}
.MyNotes .mu-tab-active {
  font-size: 18px;
  font-family: PingFang-SC-Medium;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
}
</style>
<style lang="scss">
 .MyNotes .loading {
    width: 100%;
    font-size: 14px;
    color: #dddddd;
    display: flex;
    align-items: center;
    justify-content: center;
    &.notPageOne {
      margin-top: -40px;
    }
  }
  .MyNotes .empty-text-wrap {
    width: 100%;
    height: 40vh;
    margin-top: 10vh;
  }

.mu-tabs {
  margin-bottom: 20px !important;
}
.MyNotes {
  position: relative;
  overflow-x: hidden;
  height: 100vh;
  .title {
    & > span {
      font-size: 14px;
      font-weight: bold;
      color: rgba(51, 51, 51, 1);
    }
    div {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 10px;
    }
    div > span {
      font-size: 12px;
      font-weight: Medium;
      color: #999999;
      span{
        color:#F47548;
        margin-left:20px;
      }
    }
  }
  ul {
    width: 100%;
    box-sizing: border-box;
    padding: 0 16px;
    li {
      position: relative;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.08);
      border-radius: 4px;
      margin-bottom: 15px;
      box-sizing: border-box;
      padding: 0px 15px 12px;
      margin-top: 20px;
      .img {
        position: absolute;
        top: 0;
        right: 0;
        width: 65px;
        height: 35px;
        background: url("~@as/img/kaoshi_weikaikao@2x.png") no-repeat;
        background-size: 100% 100%;
        margin-top: -8px;
        span {
          color: #fff;
          font-size: 12px;
          display: flex;
          margin-top: 3px;
          justify-content: center;
        }
      }

      .img2 {
        background: url("~@as/img/zuzhi_wode_hui@2x.png") no-repeat !important;
        background-size: 100% 100% !important;
      }

      .img3 {
        background: url("~@as/img/kaoshi_kaoshizhong@2x.png") no-repeat !important;
        background-size: 100% 100% !important;
      }

      .img4 {
        background: url("~@as/img/zuzhi_wode_org@2x.png ") no-repeat !important;
        background-size: 100% 100% !important;
      }
    }
  }
}
.mu-load-more /deep/ .mu-circle-spinner{
  border-color: #e5e5e5;
}
.MyNotes /deep/.mu-elevation-1{
  box-shadow: 0 0.05333rem 0.02667rem -0.02667rem rgba(0,0,0,0), 0 0.02667rem 0.02667rem 0 rgba(0,0,0,0), 0 0.02667rem 0.08rem 0 rgba(0,0,0,0); ;
  -webkit-box-shadow:0 0.05333rem 0.02667rem -0.02667rem rgba(0,0,0,0), 0 0.02667rem 0.02667rem 0 rgba(0,0,0,0), 0 0.02667rem 0.08rem 0 rgba(0,0,0,0); ;
}
</style>
